---
import { Icon } from "astro-icon/components";
import type { Link } from "../types/types";

interface Props {
  links: Link[];
}

const { links } = Astro.props;
---

<div class="flex flex-row flex-wrap justify-center gap-2">
  {
    links.map((link) => (
      <a
        href={link.url}
        class="flex flex-row bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 rounded-full gap-2 items-center text-lg px-5 py-2 hover:bg-zinc-950 dark:hover:bg-zinc-50 hover:no-underline"
      >
        {link.icon && <Icon name={link.icon} style={`color: ${link.iconColor}`} />}
        <span>{link.name}</span>
      </a>
    ))
  }
</div>
